<style scoped>
.login_con{
    /*margin-top: 200px;*/
}
</style>
<template>
    <div class="login_con">
        <Row type="flex" justify="center" align="middle" class="code-row-bg">
            <Col span="6" :style="{textAlign:'center'}">
                <div style="background:#eee;padding: 20px">
                    <Card :bordered="false">
                        <p slot="title">XXX后台管理中心</p>
                        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
                            <FormItem label="username" prop="username">
                                <Input type="text" v-model="formCustom.username"></Input>
                            </FormItem>
                            <FormItem label="Password" prop="passwd">
                                <Input type="password" v-model="formCustom.password"></Input>
                            </FormItem>
                            <FormItem label="captcha" prop="captcha">
                                <Input type="text" v-model="formCustom.captcha" :style="{width:'calc(100% - 120px)',float:'left'}"></Input>
                                <img :src="formCustom.url" alt="" @click="handleCode('formCustom')">
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>
                                <Button @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
                            </FormItem>
                        </Form>
                    </Card>
                </div>

            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        name: "Login",
        mounted() {
            // console.log('Component mounted.')
            this.getCode();
        },
        data () {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Please enter your password'));
                } else {
                    callback();
                }
            };
            const validateUsername = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Please enter your username'));
                } else {
                    callback();
                }
            };
            const validateCaptcha = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('Please enter your Captcha'));
                } else {
                    callback();
                }
            };
            return {
                formCustom: {
                    username: '',
                    password: '',
                    captcha:'',
                    url:''
                },
                ruleCustom: {
                    username:[
                        { validator: validateUsername, trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    captcha:[
                        { validator: validateCaptcha, trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {
            //获取验证码
            getCode(){
                axios.get('getCode').then((response)=>{
                    this.formCustom.url=response.data;
                }).catch()
            },
            handleCode(){
                this.getCode();
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.post('login', {
                            username: this.formCustom.username,
                            password: this.formCustom.password,
                            code:this.formCustom.captcha
                        })
                        .then( (response)=> {
                            if(response.data.code==1){
                                this.$Message.success(response.data.msg);
                                this.$store.commit('login',this.formCustom.username);
                                this.$router.push({ path : '/' });

                            }else {
                                this.$Message.error(response.data.msg);
                            }

                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                        //直接跳转
                        // setInterval(goTo, 3000);
                        //带参数跳转
                        // this.$router.push({path:'/testDemo',query:{setid:123456}});
                        // this.$router.push({name:'testDemo',params:{setid:111222}});

                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }

    }
</script>


